<script>
	import Header from "@/components/Header.vue"
	import Modal from "@/components/Modal.vue"
	export default {
		components: {
			Header,
			Modal
		},
		data() {
			return {
				modalShow: false,
				modalShow1: false,
				
				payType: 0,
				title: "编辑资料",
				info:{},
				sex_arr:['','男','女'],
				imgstr:''
			}
		},
		onLoad(options) {
			var info = uni.getStorageSync('info')
			this.info = info
		},
		methods: {
			uploadImages(path){
				var that = this
				uni.uploadFile({
				  url: getApp().globalData.host+'/api/Login/uploadImages',
				  filePath: path,
				  name: 'image',
				  header: {
				  	memberid:uni.getStorageSync('member_id'),
				  	membertoken:uni.getStorageSync('member_token'),
				  },
					success: res => {
						var json = JSON.parse(res.data);
						that.imgstr = json.data.image_url
						that.info.me_img = that.imgstr
					}
				})
			},
			avatarChange() {
			  var that = this;
			  // 选择图片逻辑
			  uni.chooseImage({
				count: 1, // 默认9，设置需要选择的图片张数
				sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: (res) => {
				  // 返回选定照片的本地文件路径列表，数组格式
				  that.uploadImages(res.tempFilePaths[0]);
				  // 可以在这里调用上传图片的函数，例如this.uploadAvatar(res.tempFilePaths[0])
				}
			  });
				    
			},
			edit(e){
				var val = e.detail.value
				if(val==1){
					this.info.me_sex=2
				}else{
					this.info.me_sex=1
				}
			},
		}
	}
</script>
<template>
	<view class="custom-bg">
	
		<Header :title="title" />
		
		<Modal v-if="modalShow" :confirmText="'确认修改'" :showCancel="true"
		 @confirm="()=>{
			 modalShow=false
		 }" @cancel="()=>{
			modalShow=false
		}">
			<input type="text" placeholder="请输入昵称" class="bg-gray-300 h-70 my-30 rounded-50" v-model="info.me_nick_name"
				style="text-align: center;">
		</Modal>
		
		<Modal v-if="modalShow1" :confirmText="'确认修改'" :showCancel="true"
		 @confirm="()=>{
			 modalShow1=false
		 }" @cancel="()=>{
			modalShow1=false
		}">
			<input type="text" placeholder="请输入年龄" class="bg-gray-300 h-70 my-30 rounded-50" v-model="info.me_age"
				style="text-align: center;">
		</Modal>

		<div class="list mt-30 ">
			<div class="flex between p-30 bg-white mb-20">
				<image :src="info.me_img" mode="aspectFill" class="w-140 h-140 rounded-full"></image>
				<div class="fz24 text-gray-a4" @click="avatarChange">更新头像 <image src="/static/my/right.png"
						mode="widthFix" class="w-20 ml-20">
					</image>
				</div>
			</div>

			<div class="h-90 flex between px-30 bg-white">
				<div class="fz26 text-gray-29">昵称：</div>
				<div class="fz24 text-gray-a4 flex" @click="modalShow=true">{{info.me_nick_name}} <image src="/static/my/right.png"
						mode="widthFix" class="w-20 ml-20">
					</image>
				</div>
			</div>


			<div class="line"></div>
			<div class="h-90 flex between px-30 bg-white">
				<div class="fz26 text-gray-29">性别：</div>
				<!-- 对接口得正常赋值range -->
				<picker mode="selector" :range="['男','女']" @change="edit">
					<div class="fz24 text-gray-a4 flex">{{sex_arr[info.me_sex]}}  <image src="/static/my/right.png" mode="widthFix"
							class="w-20 ml-20">
						</image>
					</div>
				</picker>
			</div>
			<div class="line"></div>
			<div class="h-90 flex between px-30 bg-white">
				<div class="fz26 text-gray-29">年龄</div>
					<div class="fz24 text-gray-a4 flex" @click="modalShow1=true">
						{{info.me_age}}
						<image src="/static/my/right.png" mode="widthFix" class="w-20 ml-20">
						</image>
					</div>
			</div>
		</div>


	</view>


</template>



<style>
	.custom-bg {
		min-height: 100%;
	}

	.avatar-group {
		position: relative;
	}

	page {
		height: 100%;
		background-color: #F8F8F8;
	}
</style>